import {Text, View} from 'react-native';

// 定义props接口
interface ChildProps {
  color: string;
  name: string;
}

export default function App() {
  return (
    <View>
      <Text>==========</Text>
      {/* 1 父组件开始传递 */}
      <Child color="red" name="张三" />
      <Text>----------</Text>
    </View>
  );
}

// 子组件
// 2 子组件 解构
function Child({color, name}: ChildProps) {
  return (
    <View>
      <Text>子组件</Text>
      {/* 3 子组件通过 props 使用属性 */}
      <Text style={{color: color}}>姓名: {name}</Text>
    </View>
  );
}
// function Child(props: ChildProps) {
//   return (
//     <View>
//       <Text>子组件</Text>
//       {/* 3 子组件通过 props 使用属性 */}
//       <Text style={{color: props.color}}>姓名: {props.name}</Text>
//     </View>
//   );
// }
